import { Button, Space } from 'antd-mobile'

import './Home.scss'

export const Home = () => {
  return (
    <div>
      <h4>Home</h4>
      <svg className="icon" aria-hidden="true">
        {/* 使用时，只需要将此处的 iconbtn_like_sel 替换为 icon 的名称即可*/}
        <use xlinkHref="#iconbtn_like_sel"></use>
      </svg>
      <svg className="icon" aria-hidden="true">
        {/* 使用时，只需要将此处的 iconbtn_like_sel 替换为 icon 的名称即可*/}
        <use xlinkHref="#iconbtn_mine_sel"></use>
      </svg>
      <div className="text-width">我是1/3屏幕宽</div>
      <div className="test-class">我是1/3屏幕宽</div>
      <Space direction="vertical">
        <Button color="primary">按钮</Button>
        <div className="button-bg-color">xxx</div>
        <div className="item-bg-color">yyy</div>
        <div className="head-bg-color">zzz</div>

        <Button color="primary">大家都一样按钮</Button>

        {/* ts 好处约束你css变量的可以取的值 */}
        <Button color="primary" style={{ '--border-radius': '8px' }} className="xxx-button">
          我想不一样
        </Button>
      </Space>
    </div>
  )
}
